<!--
 * @Descripttion: 
 * @Author: jiansheng
 * @Date: 2021-12-02 16:55:42
-->
<template>
  <div style="border: 1px solid red;padding: 20px;">
    <p @click="invokeChildFun">调用子组件方法</p>
    <p @click="invokeChildData">访问子组件属性</p>

    <child1 ref="childComp"></child1>
    <!-- <child2 ref="childComp2"></child2> -->
  </div>
</template>
<script>
import child1 from './components/child1.vue'
import child2 from './components/child2.vue'
export default {
  components: { child1, child2 },
  data() {
    return {
      parentNum: 77777
    }
  },
  mounted() {
    console.table([
      {type:'ref', value: this.$refs.childComp},
      { type: '$children', value: this.$children }
    ])
    // console.log('ref ---- 返回具体的 Component', this.$refs.childComp)
    // console.log('$children ---- 返回 Comonent集合', this.$children)
  },
  methods: {
    parentClick() {
      console.log('点击了父组件的按钮')
    },
    invokeChildFun() {
      this.$refs.childComp.clickBtn()
    },
    invokeChildData() {
      console.log('打印子组件childNum', this.$refs.childComp.childNum)
    }
  },
}
</script>